<template>
  <div id="app">
    <router-view></router-view>
    <notifications position="bottom right" :speed="200" />
  </div>
</template>
<script>
import { KeyBinding } from "@winwin/keybinding.js";
import Dispatcher from "./utils/dispatcher";
export default {
  name: "App",
  created() {
    const kbd = new KeyBinding("window");
    window.addEventListener("keydown", kbd.handler);
  },
  beforeDestroy() {
    KeyBinding.dispose();
    Dispatcher.dispose();
  }
};
</script>
<style lang="less">
* {
  box-sizing: border-box;
}
html,
body,
#app {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #16161a;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.vue-notification {
  padding: 8px 12px;
  margin: 0 10px 10px;

  font-size: 12px;

  color: #ffffff;
  background: #44a4fc;
  border-left: none;
  border-radius: 3px;

  user-select: none;
  cursor: pointer;

  &.warn {
    background: #f48a06;
    border-left-color: #f48a06;
  }

  &.error {
    background: #e54d42;
    border-left-color: #b82e24;
  }

  &.success {
    background: #68cd86;
    border-left-color: #42a85f;
  }
}
</style>
